<template>
  <div class="app-container">
    <PlatformHeader />
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px" class="custom-form">
      <el-form-item label="" prop="year">
        <el-input
          style="width: 150px"
          v-model="queryParams.year"
          placeholder="测试年份"
          clearable
          @keyup.enter.native="handleQuery"
          class="custom-height-input"
          @input="validateYear"
          maxlength="4"
        />
      </el-form-item>
      <el-form-item label="" prop="teamName">
        <el-input
          style="width: 150px"
          v-model="queryParams.teamName"
          placeholder="监测队名称"
          clearable
          @keyup.enter.native="handleQuery"
          class="custom-height-input"
        />
      </el-form-item>
      <el-form-item>
        <el-button class="search-btn action-btn" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button class="reset-btn action-btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-container">
      <div class="table-wrapper">
        <el-row :gutter="10" class="mb8">
        </el-row>
        <div class="el-form-item">
          <el-button
            class="add-btn action-btn"
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['monitormanage:testteam:add']"
          >新增监测队
          </el-button>
          <el-button
            class="edit-btn action-btn"
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['monitormanage:testteam:edit']"
          >修改
          </el-button>
          <el-button
            class="delete-btn action-btn"
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['monitormanage:testteam:remove']"
          >删除
          </el-button>
          <el-button
            class="export-btn action-btn"
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['monitormanage:testteam:export']"
          >导出
          </el-button>
        </div>
        <el-table v-loading="loading" :data="testteamList" @selection-change="handleSelectionChange"
                  @row-click="handleRowClick" style="width: 100%">
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="监测队名称" align="center" prop="teamName" :show-overflow-tooltip="true"/>
          <el-table-column label="监测队编码" align="center" prop="teamCode" :show-overflow-tooltip="true"/>
          <el-table-column label="监测队测试年份" align="center" prop="year"/>
          <el-table-column label="监测队联系电话" align="center" prop="contactTel" width="150px"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-plus"
                @click="handleAddTeammember"
                v-hasPermi="['monitormanage:teammember:add']"
              >新增队员
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['monitormanage:testteam:edit']"
              >修改
              </el-button>
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="text"-->
<!--                icon="el-icon-delete"-->
<!--                @click="handleDelete(scope.row)"-->
<!--                v-hasPermi="['monitormanage:testteam:remove']"-->
<!--              >删除-->
<!--              </el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <div class="table-wrapper">
        <el-row :gutter="10" class="mb8">
        </el-row>
        <div class="el-form-item">
          <el-button
            class="delete-btn action-btn"
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="membermultiple"
            @click="handleDeleteTeammember"
            v-hasPermi="['monitormanage:teammember:remove']"
          >删除
          </el-button>
          <el-button
            class="export-btn action-btn"
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExportTeammember"
            v-hasPermi="['monitormanage:teammember:export']"
          >导出
          </el-button>
        </div>
        <el-table v-loading="loadingmember" :data="teammemberList" @selection-change="handleSelectionteammember"
                  style="width: 100%">
          <el-table-column type="selection" width="50" align="center"/>
          <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true"/>
          <el-table-column label="性别" align="center" prop="sex"/>
          <el-table-column label="年龄" align="center" prop="age"/>
          <el-table-column label="是否参加过体质测试工作" align="center" prop="isTest">
            <template #default="{ row }">
              {{ row.isTest === '1' ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column label="学历" align="center" prop="edu" :show-overflow-tooltip="true"/>
          <el-table-column label="职业属性" align="center" prop="career" :show-overflow-tooltip="true"/>
          <el-table-column label="工作单位" align="center" prop="company" :show-overflow-tooltip="true"/>
          <el-table-column label="工作内容" align="center" prop="job" :show-overflow-tooltip="true"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdateTeammember(scope.row)"
                v-hasPermi="['monitormanage:teammember:edit']"
              >修改
              </el-button>
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="text"-->
<!--                icon="el-icon-delete"-->
<!--                @click="handleDeleteTeammember(scope.row)"-->
<!--                v-hasPermi="['monitormanage:teammember:remove']"-->
<!--              >删除-->
<!--              </el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="membertotal>0"
          :total="membertotal"
          :page.sync="queryParamsmember.pageNum"
          :limit.sync="queryParamsmember.pageSize"
          @pagination="getTeammemberList"
        />
      </div>
    </div>


    <!-- 添加或修改testteambuild对话框 -->
    <el-dialog custom-class="custom-dialog" v-dialog-drag :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="监测队名称" prop="teamName">
          <el-input v-model="form.teamName" placeholder="请输入监测队名称"/>
        </el-form-item>
        <el-form-item label="监测队编码" prop="teamCode">
          <el-input v-model="form.teamCode" placeholder="请输入监测队编码"/>
        </el-form-item>
        <el-form-item label="监测队测试年份" prop="year">
          <el-input v-model="form.year" placeholder="请输入监测队测试年份" maxlength="4" @input="validateFormYear"/>
        </el-form-item>
        <el-form-item label="监测队联系电话" prop="contactTel">
          <el-input v-model="form.contactTel" placeholder="请输入监测队联系电话"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="dialog-btn cancel-btn dialog-cancel-btn">取 消</el-button>
        <el-button type="primary" @click="submitForm" class="dialog-btn confirm-btn dialog-confirm-btn">确 定</el-button>

      </div>
    </el-dialog>
    <!-- 添加或修改monitormanagebuild对话框 -->
    <el-dialog custom-class="custom-dialog" v-dialog-drag :title="titleteammember" :visible.sync="openteammember" width="500px" append-to-body>
      <el-form ref="formteammember" :model="formteammember" :rules="rulesteammember" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formteammember.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="formteammember.age" placeholder="请输入年龄" />
        </el-form-item>
        <el-form-item label="学历" prop="edu">
          <el-input v-model="formteammember.edu" placeholder="请输入学历" />
        </el-form-item>
        <el-form-item label="职业属性" prop="career">
          <el-select
            popper-class="custom-select-dropdown"
            v-model="formteammember.career"
            placeholder="请选择职业属性"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in careerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工作单位" prop="company">
          <el-input v-model="formteammember.company" placeholder="请输入工作单位" />
        </el-form-item>
        <el-form-item label="工作内容" prop="job">
          <el-select
            popper-class="custom-select-dropdown"
            v-model="formteammember.job"
            placeholder="请选择工作内容"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in jobOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="beizhu">
          <el-input v-model="formteammember.beizhu" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="formteammember.sex">
            <el-radio
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否参加过体质测试工作" prop="isTest">
          <el-radio-group v-model="formteammember.isTest">
            <el-radio
              v-for="item in isTestOptions"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelTeammember" class="dialog-btn cancel-btn dialog-cancel-btn">取 消</el-button>
        <el-button type="primary" @click="submitFormTeammember" class="dialog-btn confirm-btn dialog-confirm-btn">确 定</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listTestteam, getTestteam, delTestteam, addTestteam, updateTestteam} from "@/api/monitormanage/testteam";
import {
  listTeammember,
  getTeammember,
  delTeammember,
  addTeammember,
  updateTeammember
} from "@/api/monitormanage/teammember";
import {selectTTeammemberByTeamId} from "../../../api/monitormanage/teammember";
import PlatformHeader from '../../../components/PlatformHeader/index.vue';

export default {
  name: "Testteam",
  components: { PlatformHeader},
  data() {
    return {
      // 遮罩层
      loading: true,
      loadingmember: false,
      // 选中数组
      ids: [],
      memberids: [],
      // 非单个禁用
      single: true,
      membersingle: true,
      // 非多个禁用
      multiple: true,
      membermultiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      membertotal: 0,
      // testteambuild表格数据
      testteamList: [],
      teammemberList: [],
      // 弹出层标题
      title: "",
      titleteammember: "",
      // 是否显示弹出层
      open: false,
      openteammember: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        teamName: null,
        teamCode: null,
        year: null,
        contactTel: null,
        orgId: null
      },
      queryParamsmember: {
        pageNum: 1,
        pageSize: 10,
        teamId: null,
        name: null,
        sex: null,
        age: null,
        isTest: null,
        edu: null,
        career: null,
        company: null,
        job: null,
        beizhu: null
      },
      // 表单参数
      form: {},
      formteammember: {
        id: null,
        teamId: null,
        name: null,
        sex: '男', // 默认选中"男"
        age: null,
        isTest: '0', // 默认选中"是"（对应值为'1'）
        edu: null,
        career: null,
        company: null,
        job: null,
        beizhu: null
      },
      // 表单校验
      rules: {
        teamName: [
          { required: true, message: "监测队名称不能为空", trigger: "blur" }
        ],
        teamCode: [
          { required: true, message: "监测队编码不能为空", trigger: "blur" }
        ],
        year: [
          { required: true, message: "监测队测试年份不能为空", trigger: "blur" },
          { pattern: /^\d{4}$/, message: "年份必须为4位数字", trigger: "blur" }
        ],
        contactTel: [
          { required: true, message: "监测队联系电话不能为空", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ]
      },
      rulesteammember: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        age: [
          { required: true, message: "年龄不能为空", trigger: "blur" },
          {
            pattern: /^\d{1,2}$/,
            message: "年龄填写有误",
            trigger: "blur"
          }
        ],
        edu: [
          { required: true, message: "学历不能为空", trigger: "blur" }
        ],
        career: [
          { required: true, message: "职业属性不能为空", trigger: "change" }
        ],
        company: [
          { required: true, message: "工作单位不能为空", trigger: "blur" }
        ],
        job: [
          { required: true, message: "工作内容不能为空", trigger: "change" }
        ],
        sex: [
          { required: true, message: "请选择性别", trigger: "change" }
        ],
        isTest: [
          { required: true, message: "请选择是否参加过体质测试工作", trigger: "change" }
        ]
      },
      rowdata: {},
      careerOptions: [
        { label: '体育系统从业人员', value: '体育系统从业人员' },
        { label: '体育教师', value: '体育教师' },
        { label: '在校大学生', value: '在校大学生' },
        { label: '卫生部员', value: '卫生部员' },
        { label: '其他职业人员', value: '其他职业人员' }
      ],
      jobOptions: [
        { label: '队长', value: '队长' },
        { label: '复测检验人员', value: '复测检验人员' },
        { label: '问卷调查人员', value: '问卷调查人员' },
        { label: '测试人员', value: '测试人员' },
        { label: '中心工作站操作人员', value: '中心工作站操作人员' },
        { label: '专业医务人员', value: '专业医务人员' }
      ],
      sexOptions: [
        { label: '男', value: '男' },
        { label: '女', value: '女' }
      ],
      isTestOptions: [
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询testteambuild列表 */
    getList() {
      this.loading = true;
      listTestteam(this.queryParams).then(response => {
        this.testteamList = response.rows;
        this.total = response.total;
        this.loading = false;

        // 如果查询结果为空，清空右侧表格数据
        if (this.testteamList.length === 0) {
          this.clearTeammemberData();
        }
      }).catch(() => {
        this.loading = false;
        this.clearTeammemberData(); // 出错时也清除右侧数据
      });
    },

    /** 清空队员表格数据 */
    clearTeammemberData() {
      this.teammemberList = [];
      this.membertotal = 0;
      this.memberids = [];
      this.membersingle = true;
      this.membermultiple = true;
    },

    handleRowClick(row) {
      this.rowdata = row
      // 调用获取团队成员列表的方法
      this.getTeammemberList(this.rowdata);
    },
    getTeammemberList(row) {
      this.loadingmember = true;
      listTeammember(row).then(response => {
        this.teammemberList = response.rows;
        this.membertotal = response.total;
        this.loadingmember = false;
      }).catch(() => {
        this.loadingmember = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancelTeammember() {
      this.openteammember = false;
      this.resetteammember();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        teamName: null,
        teamCode: null,
        year: null,
        contactTel: null,
        orgId: null
      };
      this.resetForm("form");
    },
    // 表单重置
    resetteammember() {
      this.formteammember = {
        id: null,
        teamId: null,
        name: null,
        sex: '男', // 重置时保持默认值
        age: null,
        isTest: '0', // 重置时保持默认值
        edu: null,
        career: null,
        company: null,
        job: null,
        beizhu: null
      };
      this.resetForm("formteammember");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // 验证年份格式
      if (this.queryParams.year && !/^\d{4}$/.test(this.queryParams.year)) {
        this.$modal.msgError("年份必须为4位数字");
        return;
      }

      // 在查询前先清空右侧表格
      this.clearTeammemberData();

      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.year = null;
      this.queryParams.teamName = null;

      // 重置时也清空右侧表格
      this.clearTeammemberData();

      this.handleQuery();
    },
    // 验证年份输入
    validateYear(value) {
      // 只允许输入数字
      this.queryParams.year = value.replace(/[^\d]/g, '');
      // 限制为4位
      if (this.queryParams.year && this.queryParams.year.length > 4) {
        this.queryParams.year = this.queryParams.year.slice(0, 4);
      }
    },
    // 验证表单中的年份输入
    validateFormYear(value) {
      // 只允许输入数字
      this.form.year = value.replace(/[^\d]/g, '');
      // 限制为4位
      if (this.form.year && this.form.year.length > 4) {
        this.form.year = this.form.year.slice(0, 4);
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleSelectionteammember(selection) {
      this.memberids = selection.map(item => item.id)
      this.membersingle = selection.length !== 1
      this.membermultiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getTestteam(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTestteam(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTestteam(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    /** 删除监测队（支持单行删除和多选删除） */
    // handleDelete(row) {
    //   let idsToDelete = [];
    //
    //   if (row.id) {
    //     idsToDelete = [row.id];
    //   } else {
    //     // 顶部多选删除：确保 this.ids 是非空数组
    //     if (this.ids && this.ids.length > 0) {
    //       idsToDelete = [...this.ids]; // 复制数组避免引用问题
    //     } else {
    //       this.$modal.msgWarning("请至少选择一条数据");
    //       return;
    //     }
    //   }
    //
    //   // 检查所选监测队是否包含队员
    //   selectTTeammemberByTeamId(idsToDelete).then(hasMembers => {
    //     if (hasMembers) {
    //       this.$modal.msgError("所选监测队包含队员，不允许删除");
    //       return;
    //     }
    //
    //     // 确认删除
    //     this.$modal.confirm(`确定删除选中的 ${idsToDelete.length} 条数据吗？`).then(() => {
    //       return delTestteam(idsToDelete); // 调用批量删除接口
    //     }).then(() => {
    //       this.$modal.msgSuccess("删除成功");
    //       this.getList(); // 刷新列表
    //       this.ids = []; // 清空选中项
    //       this.single = true; // 重置单选状态
    //       this.multiple = true; // 重置多选状态
    //     }).catch(() => {});
    //   }).catch(err => {
    //     this.$modal.msgError("检查监测队成员失败：" + err.message);
    //   });
    // },
    handleDelete(row) {
      let idsToDelete = [];

      if (row.id) {
        idsToDelete = [row.id];
      } else {
        // 顶部多选删除：确保 this.ids 是非空数组
        if (this.ids && this.ids.length > 0) {
          idsToDelete = [...this.ids]; // 复制数组避免引用问题
        } else {
          this.$message.warning("请至少选择一条数据");
          return;
        }
      }

      // 检查所选监测队是否包含队员
      selectTTeammemberByTeamId(idsToDelete).then(hasMembers => {
        if (hasMembers) {
          this.$message.error("所选监测队包含队员，不允许删除");
          return;
        }

        // 确认删除
        this.$confirm(`确定删除选中的 ${idsToDelete.length} 条数据吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'custom-confirm', // 添加自定义类名
        }).then(() => {
          return delTestteam(idsToDelete); // 调用批量删除接口
        }).then(() => {
          this.$message.success("删除成功");
          this.getList(); // 刷新列表
          this.ids = []; // 清空选中项
          this.single = true; // 重置单选状态
          this.multiple = true; // 重置多选状态
        }).catch(() => {});
      }).catch(err => {
        this.$message.error("检查监测队成员失败：" + err.message);
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('monitormanage/testteam/export', {
        ...this.queryParams
      }, `testteam_${new Date().getTime()}.xlsx`)
    },



    // 监测队员
    /** 新增按钮操作 */
    handleAddTeammember() {
      this.resetteammember();
      this.openteammember = true;
      this.titleteammember = "添加";
    },
    /** 修改按钮操作 */
    handleUpdateTeammember(row) {
      this.resetteammember();
      const id = row.id || this.ids
      getTeammember(id).then(response => {
        this.formteammember = response.data;
        this.openteammember = true;
        this.titleteammember = "修改";
      });
    },
    /** 提交按钮 */
    submitFormTeammember() {
      this.$refs["formteammember"].validate(valid => {
        if (valid) {
          if (this.formteammember.id != null) {
            updateTeammember(this.formteammember).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openteammember = false;
              this.getTeammemberList(this.rowdata);
            });
          } else {
            this.formteammember.teamId = this.rowdata.id
            addTeammember(this.formteammember).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openteammember = false;
              this.getTeammemberList(this.rowdata);
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    // handleDeleteTeammember(row) {
    //   let idsToDelete = [];
    //
    //   // 单行删除
    //   if (row && row.id) {
    //     idsToDelete = [row.id];
    //   } else {
    //     // 批量删除
    //     if (this.memberids && this.memberids.length > 0) {
    //       idsToDelete = [...this.memberids];
    //     } else {
    //       this.$modal.msgWarning("请至少选择一条队员数据");
    //       return;
    //     }
    //   }
    //
    //   // 使用箭头函数确保this指向正确
    //   this.$modal.confirm(`是否确认删除选中的 ${idsToDelete.length} 名队员？`).then(() => {
    //     return delTeammember(idsToDelete);
    //   }).then(() => {
    //     this.$modal.msgSuccess("删除成功");
    //     this.getTeammemberList(this.rowdata);
    //     // 清空选中状态
    //     this.memberids = [];
    //     this.membersingle = true;
    //     this.membermultiple = true;
    //   }).catch(() => {});
    // },
    handleDeleteTeammember(row) {
      let idsToDelete = [];

      // 单行删除
      if (row && row.id) {
        idsToDelete = [row.id];
      } else {
        // 批量删除
        if (this.memberids && this.memberids.length > 0) {
          idsToDelete = [...this.memberids];
        } else {
          this.$message.warning("请至少选择一条队员数据");
          return;
        }
      }

      // 使用箭头函数确保this指向正确
      this.$confirm(`是否确认删除选中的 ${idsToDelete.length} 名队员？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'custom-confirm', // 添加自定义类名
      }).then(() => {
        return delTeammember(idsToDelete);
      }).then(() => {
        this.$message.success("删除成功");
        this.getTeammemberList(this.rowdata);
        // 清空选中状态
        this.memberids = [];
        this.membersingle = true;
        this.membermultiple = true;
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExportTeammember() {
      this.download('monitormanage/teammember/export', {
        ...this.queryParamsmember
      }, `teammember_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url('../../assets/images/bgn.png');
  background-size: 100% 100%;
  padding: 16px;
  box-sizing: border-box;
  padding-top: 0;
}

/* 表格整体容器 */
::v-deep .el-table {
  background: transparent;
  border-radius: 12px;
  overflow: hidden;

  /* 表头圆角 */
  .el-table__header-wrapper {
    border-radius: 12px;
    overflow: hidden;

    th:first-child {
      border-top-left-radius: 12px;
    }
    th:last-child {
      border-top-right-radius: 12px;
    }
  }
  /* 表格行圆角 */
  .el-table__body-wrapper {
    border-radius: 0 0 12px 12px;

    tr {
      td:first-child {
        border-bottom-left-radius: 12px;
      }
      td:last-child {
        border-bottom-right-radius: 12px;
      }
    }

    /* 为每一行添加圆角 */
    tr.el-table__row {
      td:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
      }
      td:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
      }
    }
  }
}
/* 确保表头单元格没有边框干扰圆角 */
::v-deep .el-table th.el-table__cell {
  border: none;
}
.el-table::before{
  height: 0;
}
::v-deep .el-table th.el-table__cell.is-leaf{
  border-bottom: none;
}
/* 表头 - 深蓝到青绿，柔和渐变 */
::v-deep .el-table th {
  background: #f7e797;
  color: #1e4f91; // 更深的蓝
  font-weight: bold;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
}
/* 奇偶行 - 亮蓝与浅青 */
::v-deep .el-table__row {
  td {
    border: none; /* 移除单元格边框 */
  }
}

/* 奇偶行 - 亮蓝与浅青 */
::v-deep .el-table__row:nth-child(odd) {
  background: linear-gradient(90deg, #99e8ff, #4f85ff);
}
::v-deep .el-table__row:nth-child(even) {
  background: linear-gradient(90deg, #4f85ff, #99e8ff);
}

/* 单元格文字 */
::v-deep .el-table td {
  color: #000; /* 深灰色，更易读 */
  font-size: 18px;
  padding: 12px 8px;
}
::v-deep .el-table__body {
  border-collapse: separate !important;
  border-spacing: 0 5px !important;
}
/* 鼠标悬停 - 橙黄渐变 */
::v-deep .el-table__body tr:hover > td {
  background: #9ef7c5!important;
}

/* 操作栏按钮文字颜色 - 黑色 */
::v-deep .el-table .el-button--mini {
  color: #000 !important; /* 文字颜色改为纯黑 */
  font-size: 18px;
  font-weight: 400;
}
::v-deep .el-table .cell{
  line-height: 35px;
  height: 35px;
}

/* 修复表格checkbox显示问题 */
::v-deep .el-table .el-checkbox__inner {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
}

::v-deep .el-table .el-checkbox__input.is-checked .el-checkbox__inner::after {
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
}

::v-deep .el-table .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  background-color: #fff;
  top: 8px;
  height: 2px;
}

/* 分页栏美化 */
::v-deep .pagination {
  margin-top: 16px;
  padding: 10px 0;
  background-color: #f8fbff;
  border-radius: 8px;
}
::v-deep .pagination-container{
  background: transparent;
}
::v-deep .el-pagination{
  color: #fff!important;
}
::v-deep .el-pagination__total{
  color: #fff!important;
}
::v-deep .el-pagination__jump{
  color: #fff!important;
}

/* 美化 el-input 输入框 */
::v-deep .el-input .el-input__inner {
  background-color: rgba(255, 255, 255, 0.1); /* 半透明白背景 */
  border: 1px solid #00CCFE; /* 柔和的蓝色边框 */
  border-radius: 6px;
  color: #f0f0f0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 16px;
}

/* 输入框 placeholder 颜色改为 #fff */
::v-deep .el-input__inner::placeholder {
  color: #fff !important;
}

/* 输入框获得焦点时边框高亮 */
::v-deep .el-input .el-input__inner:focus {
  border-color: #409eff; /* element-ui 默认蓝色 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* 清除按钮的颜色调整 */
::v-deep .el-input__clear {
  color: #a8c0ff;
}

/* 清除按钮 hover 颜色 */
::v-deep .el-input__clear:hover {
  color: #409eff;
}

/* 搜索区按钮美化 - 调大尺寸 */
::v-deep .el-form-item .el-button {
  border-radius: 22px;
  font-weight: 600;
  font-size: 16px;       /* 字号变大 */
  padding: 10px 28px;    /* 内边距加大 */
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(66, 133, 244, 0.3);
}

/* 通用按钮基础样式 */
.el-button {
  font-size: 14px;
  padding: 10px 20px; /* 比默认稍大 */
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.25s ease;
}

/* 调整表单里的按钮间距 */
::v-deep .el-form-item .el-button {
  margin-left: 12px; /* 你可以改成 16px 更宽松 */
}
/* 按钮通用样式（不改尺寸） */
::v-deep .el-form-item .action-btn {
  border-radius: 20px; /* 圆润 */
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* 悬浮时按钮微微上浮 + 光晕 */
::v-deep .el-form-item .action-btn:hover {
  transform: translateY(-2px);
}

/* 搜索按钮 - 宝石蓝渐变 */
::v-deep .el-form-item .search-btn {
  background: linear-gradient(135deg, #b4cdeb, #2f6bcc);
  color: #fff;
}
::v-deep .el-form-item .search-btn:hover {
  background: linear-gradient(135deg, #5aa2f8, #3a8ef6);
  box-shadow: 0 6px 14px rgba(58, 142, 246, 0.5);
}

/* 重置按钮 - 高级灰蓝 */
::v-deep .el-form-item .reset-btn {
  background: linear-gradient(135deg, #df9f3f, #edc73d);
  color: #fff;
}
::v-deep .el-form-item .reset-btn:hover {
  background: linear-gradient(135deg, #ffcc80, #ffb74d);
  box-shadow: 0 6px 14px rgba(255, 183, 77, 0.5);
}

/* 新增按钮 - 蓝绿色渐变 */
::v-deep .el-form-item .add-btn {
  background: linear-gradient(135deg, #4fd1c5, #38b2ac);
  color: #fff;
}
::v-deep .el-form-item .add-btn:hover {
  background: linear-gradient(135deg, #6ee7df, #4fd1c5);
  box-shadow: 0 6px 14px rgba(72, 187, 176, 0.5);
}

/* 修改按钮 - 青柠绿渐变 */
::v-deep .el-form-item .edit-btn {
  background: linear-gradient(135deg, #8bc34a, #6fa33f);
  color: #fff;
}
::v-deep .el-form-item .edit-btn:hover {
  background: linear-gradient(135deg, #a8d672, #8bc34a);
  box-shadow: 0 6px 14px rgba(139, 195, 74, 0.5);
}

/* 删除按钮 - 胭脂红渐变 */
::v-deep .el-form-item .delete-btn {
  background: linear-gradient(135deg, #e57373, #c62828);
  color: #fff;
}
::v-deep .el-form-item .delete-btn:hover {
  background: linear-gradient(135deg, #ef9a9a, #e57373);
  box-shadow: 0 6px 14px rgba(229, 115, 115, 0.5);
}

/* 导出按钮 - 金橙渐变 */
::v-deep .el-form-item .export-btn {
  background: linear-gradient(135deg, #1ec2e7, #54a9ff);
  color: #fff;
}
::v-deep .el-form-item .export-btn:hover {
  background: linear-gradient(135deg, #7cdde7, #2989e9);
  box-shadow: 0 6px 14px rgba(160, 180, 200, 0.5);
}

/* 对话框整体样式 - 添加渐变背景 */
::v-deep .custom-dialog {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: linear-gradient(145deg, #f5f7fa, #e4e8f0);

  .el-dialog__header {
    background: linear-gradient(90deg, #8caefb, #0160FA);
    padding: 20px;
    margin: 0;
    border-bottom: none;

    .el-dialog__title {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: 1px;
    }

    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;

      .el-dialog__close {
        color: #fff;
        font-size: 20px;
      }
    }
  }

  /* 修改body部分为渐变 */
  .el-dialog__body {
    padding: 45px 40px 10px 40px;
    background: linear-gradient(145deg, #e6f0ff, #bad2ff);
    color: #333; /* 文字颜色调整 */
  }

  /* 修改footer部分为渐变 - 与body同色系但略深 */
  .el-dialog__footer {
    padding: 20px 40px;
    background: linear-gradient(145deg, #e6f0ff, #a2c3ff);
    border-top: 1px solid rgba(79, 133, 255, 0.1); /* 半透明分割线 */
    border-radius: 0 0 16px 16px;
  }
}

/* 表单元素样式调整以适应新背景 */
::v-deep .custom-input {
  .el-input__inner {
    background-color: rgba(255, 255, 255, 0.1); /* 半透明白底 */
    border: 1px solid rgba(79, 133, 255, 0.3);
    color: #000;

    &:focus {
      border-color: #4f85ff;
      background-color: #fff;
      box-shadow: 0 0 0 2px rgba(79, 133, 255, 0.2);
    }
  }
}
::v-deep .custom-input.el-input .el-input__inner{
  border: 1px solid rgba(79, 133, 255, 0.3);
}

/* 单选按钮组样式调整 */
::v-deep .custom-radio-group {
  .custom-radio {
    .el-radio__label {
      color: #555; /* 加深文字颜色 */
    }
  }
}

/* 对话框底部按钮居中样式 */
.dialog-footer {
  display: flex;
  justify-content: center; /* 改为居中 */
  align-items: center;
  gap: 20px; /* 添加按钮间距 */

  .el-button {
    min-width: 120px; /* 稍微加大按钮宽度 */
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s;
    margin: 0; /* 移除原来的margin-left */
  }

  .dialog-cancel-btn {
    border: none;
    background: linear-gradient(135deg, #aed7ff, #80bcf9);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 6px 14px rgb(128 188 249 / 50%);
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  .dialog-confirm-btn {
    background: linear-gradient(90deg, #4f85ff, #6a8cff);
    border: none;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 6px 14px rgb(128 188 249 / 50%);
    &:hover {
      background: linear-gradient(90deg, #3a73ff, #4f85ff);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(79, 133, 255, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

/* 修复对话框输入框文字和placeholder颜色 */
::v-deep .custom-dialog .el-input__inner {
  color: #000 !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(79, 133, 255, 0.3) !important;
}

::v-deep .custom-dialog .el-input__inner::placeholder {
  color: #888 !important;
  font-size: 14px;
}

/* 修复对话框下拉选择框样式 */
::v-deep .custom-dialog .el-select .el-input__inner {
  color: #000 !important;
}

::v-deep .custom-dialog .el-select-dropdown {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(79, 133, 255, 0.3);
}

/* 响应式调整 */
@media (max-width: 768px) {
  ::v-deep .custom-dialog {
    width: 90% !important;

    .el-dialog__body {
      padding: 20px;
    }

    .el-form-item {
      margin-bottom: 18px;
    }

    .el-col {
      width: 100%;
    }
  }
}

/* 关键样式：调整输入框高度为36px */
::v-deep .custom-form .el-input__inner {
  height: 36px!important;
  line-height: 36px!important;
}
/* 自定义36px高度的el-input */
::v-deep .custom-height-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}

/* 表格容器布局 */
.table-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center
}

/* 表格卡片样式 */
.table-wrapper {
  /*flex: 1;*/
  width: 49%;
  background: transparent;
  border-radius: 8px;
  padding: 0px;
  transition: all 0.3s ease;
  padding-top: 0;
}

/* 表格标题区域 */
.mb8 {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 搜索表单样式 */
.el-form.custom-form {
  background: transparent;
  padding-top: 25px;
  border-radius: 8px;
  box-shadow: none;
  padding-left: 10px;
 /* margin-bottom: 20px;*/

  .el-form-item {
    margin-bottom: 18px;
  }
}

/* 滚动条样式 */
::v-deep ::-webkit-scrollbar {
  width: 2px;
  height: 6px;
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
  border-radius: 4px;
  background-color: rgb(1 96 250);
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
  border-radius: 8px;
  background-color: #0080ff;
}

/*定义滑块悬停变化颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb:hover{
  background-color: #C7C9CC;
}

/* 响应式处理 */
@media (max-width: 1200px) {
  .table-container {
    flex-direction: column;
  }

  .table-wrapper {
    margin-bottom: 20px;
  }
}
::v-deep .el-form-item__label {
  color: #000!important;
}
</style>
